<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

    <style>

    </style>
</head>

<body>
    <div id="app">
            请录入 成绩(0--100): <input type="text" v-model.lazy="score">
            <div v-show="error" style="color: #ff0000">输入的成绩不正确</div>

    </div>



    <script>


        let app = Vue.createApp({
            // 为了让页面绑定的数据  
            data() {
                return {
                   score:0,
                   error:false
                }
            },
            // methods:{},

            //计算属性 computed 
            // computed: { },


            //观察器 watch
             watch:{
                score: function(newVal,oldVal){
                    console.log(newVal,oldVal);
                    if(newVal<0 || newVal>100){
                        this.error = true;
                    }else{
                        this.error = false
                    }
                }
            }

        }).mount("#app")
    </script>
</body>

</html>